#include('header.html', {title: '后台管理·平台统计', count: 'active'})
<style>
  .table-bottom {
    position: absolute;
    right: 20px;
    bottom: 29px;
  }
</style>
<div class="body-wrapper">
  <div class="layui-card">
    <div class="layui-card-header">
      <h3 class="card-title font-yy">
        平台统计
      </h3>
      <div class="header-tools">
        <form class="layui-form">
          <div class="layui-inline width-100">
            <select name="role" class="layui-select" lay-filter="userRole">
              <option value="2">老师</option>
              <option value="1">学生</option>
            </select>
          </div>
        </form>
      </div>
    </div>
    <div class="layui-card-body">
      <table id="count" lay-filter="countTable"></table>
      <div class="table-bottom">
        <a class="layui-btn layui-btn-xs layui-bg-cyan" target="_top">
          <i class="layui-icon-download-circle layui-icon"></i>导出
        </a>
      </div>
    </div>
  </div>
</div>
<script>
  layui.use(['form', 'layer', 'table', 'jquery'], function () {
    var table = layui.table;
    var form = layui.form;
    var $ = layui.jquery;

    var stuCols = [[
      {title: '序号', type: 'numbers'},
      {
        title: '用户', templet: function (d) {
          var user = d.user;
          var n = user.name;
          if (n == null || n === '') n = user.username;
          return '<a href="/user/' + user.id + '/home">' + n + '</a>';
        }
      },
      {title: '身份', templet: '<p><span class="layui-badge layui-bg-gray">学生</span></p>'},
      {title: '学习课程', field: 'learns'},
      {title: '观看视频', field: 'looks'},
      {title: '已练习题', field: 'doResponse'},
      {title: '参与考试', field: 'exams'},
      {title: '笔记', field: 'notes'},
      {title: '提问', field: 'asks'},
      {title: '评价', field: 'comments'}
    ]];
    var teaCols = [[
      {title: '序号', type: 'numbers'},
      {
        title: '用户', templet: function (d) {
          var user = d.user;
          var n = user.name;
          if (n == null || n === '') n = user.username;
          return '<a href="/user/' + user.id + '/home">' + n + '</a>';
        }
      },
      {
        title: '身份', templet: function (d) {
          var role = d.user.role;
          if (role === 3) {
            return '<span class="layui-badge layui-bg-cyan">管理员</span>'
          } else {
            return '<span class="layui-badge layui-bg-green">老师</span>'
          }
        }
      },
      {title: '课程', field: 'courses'},
      {title: '视频', field: 'tasks'},
      {title: '习题', field: 'practice'},
      {title: '试卷', field: 'papers'},
      {title: '资料', field: 'materials'},
      {title: '提问回复', field: 'askResults'},
      {title: '试卷批阅', field: 'paperView'}
    ]];

    var countTable = table.render({
      elem: '#count',
      url: '/count/api/data',
      method: 'post',
      page: true,
      where: {role: 2},
      cols: teaCols,
      parseData: function (res) {
        if (res.success) {
          $('.table-bottom').show();
        } else {
          $('.table-bottom').hide();
        }
        return {
          "code": res.code,
          "msg": res.msg,
          "count": (res.payload ? res.payload.totalRows : 0),
          "data": (res.payload ? res.payload.rows : [])
        };
      }
    }); // table end

    form.on('select(userRole)', function (f) {
      var role = f.value;
      if (role == 1) {
        table.reload('count', {
          where: {role: 1},
          cols: stuCols
        });
      } else {
        table.reload('count', {
          where: {role: 2},
          cols: teaCols
        })
      }
    }); // form end

    $('.table-bottom').on('click', function (e) {
      var role = $('[name="role"]').val();
      window.open('/count/api/excel?role=' + role, "_top");
    });
  });
</script>

#include('footer.html')
